<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #app{
        border: 1px solid red;
        width: 200px;
        height: 200px;
    } 
    #app2{
        border: 1px solid red;
        width: 200px;
        height: 200px;
    }
</style>
<body>
<div id="app">
</div>
<div id="app2">
</div>
<script>
    
    /*
        0.闭包
     */
    function getRandom(count) {
        return function (min = 0, max = 100) {
            if (count < 1) {
                return []
            } else {
                let arr = Array.from({length: count})
                return arr.map(() => Math.floor(Math.random() * (max - min) + min + 1))
            }
        }
    }

    // console.log(getRandom(5)(4,10));
    
    let first = getRandom(5);
    let result = first(0,1000)
    console.log(result)
    // 解除对函数的引用,可以释放内存
    first = null;
    
    
    /*
        1. 闭包中的this对象
            注意 this和arguments都是不能直接在内部函数中访问的。
            如果想访问包含作用域中 的 arguments 对象，则同样需要将其引用先保存到闭包能访问的另一个变量中。
     */
    window.id = 'The Window'
    let object = {
        id:'My Object',
        getId(){
            return function () {
                return this.id;
            }
        }
    }
    console.log(object.getId()())  // The Window
    
    /*
        2.内存泄漏
     */
    // 2.1 : element不能释放
    function clickEvent() {
        let element = document.getElementById('app')
        element.onclick = () =>console.log(element.id)
    }
    clickEvent();
    
    // 2.2: 优化后
    function clickEvent2() {
        let element = document.getElementById('app2')
        let id = element.id;
        element.onclick = () =>console.log(id)
        element = null
    }
    clickEvent2()
    
    
</script>
</body>
</html>